<template>
   <view class="uv-page" ref="uv-back-top">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义backTop(滚动页面即可在右下角看到图标)</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__backTop-item">
               <uv-checkbox-group
                  placement="column"
                  shape="square"
                  @change="checkboxChange"
                  v-model="value"
               >
                  <uv-checkbox
                     :customStyle="{ marginBottom: '8px' }"
                     v-for="(item, index) in checkboxList"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                  >
                  </uv-checkbox>
               </uv-checkbox-group>
            </view>
         </view>
      </view>
      <uv-back-top
         :right="backTopData.right"
         :customStyle="backTopData.customStyle"
         :bottom="backTopData.bottom"
         :icon="backTopData.icon"
         :mode="backTopData.mode"
         :iconStyle="backTopData.iconStyle"
         :duration="backTopData.duration"
         :scrollTop="scrollTop"
         @click="click"
      ></uv-back-top>
   </view>
</template>

<script lang="ts" setup>
import { onPageScroll } from '@dcloudio/uni-app';
import { onMounted, reactive, ref } from 'vue';

const scrollTop = ref(0);
const value = ref([]);
const backTopData = reactive<{
   mode: 'circle' | 'square';
   icon: string;
   bottom: number;
   customStyle: {};
   iconStyle: {};
   right: number;
   duration: number;
   scrollTop?: number;
}>({
   mode: 'circle',
   icon: 'arrow-upward',
   bottom: 100,
   customStyle: {},
   iconStyle: {},
   right: 20,
   duration: 300,
});
// 被自定义的样式
const checkboxList = [
   {
      name: '显示方形',
   },
   {
      name: '自定义图标',
   },
   {
      name: '自定义距离',
   },
   {
      name: '自定义样式',
   },
   {
      name: '自定义返回顶部滚动时间',
   },
];
const checkboxChange = (n: string[]) => {
   if (n.includes('显示方形')) {
      backTopData.mode = 'square';
   } else {
      backTopData.mode = 'circle';
   }
   if (n.includes('自定义图标')) {
      backTopData.icon = 'arrow-up';
   } else {
      backTopData.icon = 'arrow-upward';
   }
   if (n.includes('自定义距离')) {
      backTopData.bottom = 300;
      backTopData.right = 20;
   } else {
      backTopData.bottom = 100;
   }
   if (n.includes('自定义样式')) {
      backTopData.customStyle = {
         backgroundColor: '#2979ff',
      };
      backTopData.iconStyle = {
         color: '#ffffff',
      };
   } else {
      backTopData.customStyle = {};
      backTopData.iconStyle = {};
   }
   if (n.includes('自定义返回顶部滚动时间')) {
      backTopData.duration = 1500;
   } else {
      backTopData.duration = 300;
   }
};
const click = () => {
   console.log('click');
};

onPageScroll(e => {
   scrollTop.value = e.scrollTop;
});
onMounted(() => {
   backTopData.icon = 'arrow-up';
});
</script>

<style lang="scss" scoped>
.uv-page {
   height: 1200px;
   &__backTop-item {
      margin-top: 10px;
   }
}
</style>
